'use client';

import UserMenu from './UserMenu';
import { useSession } from 'next-auth/react';
import Link from 'next/link';

export default function Navbar() {
  const { data: session } = useSession();

  return (
    <nav className="bg-white/90 shadow-sm backdrop-blur-sm sticky top-0 z-50 border-b border-gray-100 transition-all duration-300">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
          <div className="flex-shrink-0">
            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent hover:from-indigo-500 hover:to-purple-500 transition-colors duration-300 transform hover:scale-105">
              纸绘文档
            </Link>
          </div>
          <div className="flex items-center">
            {!session ? (
              <div className="space-x-4">
                <Link
                  href="/auth/signin"
                  className="text-gray-700 hover:text-indigo-600 transition-colors duration-300 font-medium"
                >
                  登录
                </Link>
                <Link
                  href="/auth/signup"
                  className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-2 rounded-full hover:from-indigo-500 hover:to-purple-500 transition-all duration-300 font-medium shadow-md hover:shadow-lg"
                >
                  注册
                </Link>
              </div>
            ) : (
              <UserMenu />
            )}
          </div>
        </div>
      </div>
    </nav>
  );
}